<!-- 购物车部分-->
<template>
  <div class="card_wrapper">
    <div class="header">
      <div class="header_left">
        <h1>
          购物车
        </h1>
        <div class="address">
          <van-icon name="location-o" />
          <span>云南大学呈贡校区</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="header_right">管理</div>
    </div>
    <div class="nav">
      <div class="nav_item">
        <span>
          全部(3)
          <van-icon name="arrow-down" />
        </span>
      </div>
      <div class="nav_item">
        <van-icon name="star" color="red" />
        <span>收藏</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="list" v-for="(item, index) in 1" :key="index">
      <div class="list_header">
        <van-checkbox v-model="checked"></van-checkbox>
        <div class="header_content">
          <div class="header_title">
            <h3>老王家冒菜·干拌麻辣烫</h3>
            <span>21分钟送达</span>
            <van-icon name="arrow" />
          </div>
          <div class="label">
            <span>40减2</span>
            <span>70减3</span>
            <span>100减4</span>
          </div>
        </div>
      </div>
      <div class="item">
        <van-checkbox v-model="checked"></van-checkbox>
        <van-image width="100" height="100" radius="8" :src="require('../assets/maocai.jpg')" />
        <div class="good">
          <div class="good_title">冒菜锅底(必需点)</div>
          <span>规格：做成干拌(微辣)</span>
          <div class="params">
            <span class="price">￥15.96</span>
            <span>x1</span>
          </div>
        </div>
      </div>
    </div>
    <div class="list" v-for="(item, index) in 1" :key="index">
      <div class="list_header">
        <van-checkbox v-model="checked"></van-checkbox>
        <div class="header_content">
          <div class="header_title">
            <h3>瑞幸咖啡</h3>
            <span>29分钟送达</span>
            <van-icon name="arrow" />
          </div>
          <div class="label">
            <span>21减3</span>
            <span>35减5</span>
          </div>
        </div>
      </div>
      <div class="item">
        <van-checkbox v-model="checked"></van-checkbox>
        <van-image width="100" height="100" radius="8" :src="require('../assets/ruixing.png')" />
        <div class="good">
          <div class="good_title">小白梨拿铁</div>
          <span>规格：少冰 不额外加糖</span>
          <div class="params">
            <span class="price">￥11.34</span>
            <span>x2</span>
          </div>
        </div>
      </div>
    </div>
    <div class="list" v-for="(item, index) in 1" :key="index">
      <div class="list_header">
        <van-checkbox v-model="checked"></van-checkbox>
        <div class="header_content">
          <div class="header_title">
            <h3>肯德基</h3>
            <span>47分钟送达</span>
            <van-icon name="arrow" />
          </div>
          <div class="label">
            <span>小食满30减3</span>
            <span>70减5</span>
          </div>
        </div>
      </div>
      <div class="item">
        <van-checkbox v-model="checked"></van-checkbox>
        <van-image width="100" height="100" radius="8" :src="require('../assets/KFC.jpg')" />
        <div class="good">
          <div class="good_title">【元气早八人】芝士鸡肉帕尼尼美式两件套</div>
          <span>规格：可乐少冰 汉堡不加生菜</span>
          <div class="params">
            <span class="price">￥10.9</span>
            <span>x1</span>
          </div>
        </div>
      </div>
    </div>
    <van-submit-bar :price="4020" button-text="结算" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
      <template #button>
        <div class="button">结算</div>
      </template>
    </van-submit-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    onSubmit() {
      
    }
  },
}
</script>

<style lang="scss" scoped>
.card_wrapper {
  padding: 20px 10px 50px;
  background: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h1 {
      font-size: 22px;
      span {
        font-size: 16px;
        margin-right: 8px;
      }
    }
    .address {
      display: flex;
      align-items: center;
      span {
        margin: 0 4px;
        font-size: 14px;
        color: rgb(158, 155, 155);
      }
    }
    .header_left {
      display: flex;
      align-items: flex-end;
    }
    .header_right {
      font-size: 14px;
    }
  }
  .nav {
    display: flex;
    align-items: center;
    margin: 16px 0 10px;
    .nav_item {
      font-size: 14px;
      margin-right: 12px;
      padding: 4px 8px;
      &:first-child {
        border: 1px solid rgb(228, 228, 40);
        border-radius: 30px;
        font-weight: 700;
        background: rgba(230, 230, 107, 0.308);
      }
      &:last-child {
        border-radius: 50px;
        background: rgba(204, 204, 204, 0.27);
      }
    }
  }
  .list {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;
    .list_header {
      display: flex;
      align-items: flex-start;
      .van-checkbox {
        margin-top: 4px;
      }
      .header_content {
        margin-left: 10px;
      }
    }
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .van-checkbox {
        margin-right: 10px;
      }
      .good {
        margin-left: 16px;
        flex: 1;
        .good_title {
          font-weight: 700;
          margin-bottom: 10px;
        }
        & > span {
          margin-bottom: 10px;
          display: inline-block;
        }
        .params {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .price {
            font-size: 18px;
            color: red;
          }
        }
      }
    }
    .header_title {
      display: flex;
      align-items: center;
      span {
        border-radius: 6px;
        border: 1px solid #ccc;
        padding: 0 2px;
        margin-left: 8px;
        font-size: 14px;
      }
    }
    .label {
      margin: 10px 0;
      span {
        border: 1px solid rgba(255, 0, 0, 0.51);
        font-size: 12px;
        padding: 2px 4px;
        border-radius: 4px;
        margin-right: 4px;
      }
    }
  }
  .button {
    background: yellow;
    color: black;
    font-weight: 700;
    padding: 10px 40px;
    border-radius: 30px;
  }
}
.van-submit-bar{
  bottom:49px ;
}
</style>
